<!DOCTYPE html>
<html lang="en"

      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <title>用户管理</title>
    <style>
        nav {
            font-size: 1.5rem;
            background-color: #21D4FD;
            background-image: -webkit-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: -moz-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: -o-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
        }
        h1 {
            font-size: 2rem;
        }
        li {
            margin: 10px 20px;
        }
        body {
            /*             background-image: url("../static/img/2.jpg"); */
            background-size: cover;
        }





        table {
            width: 1200px;
        }
        table, td, th {
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center;
        }
        table tr {
            height: 60px;
        }
        #pages {
            width: 1200px;
            height: 50px;
            border: gainsboro solid;
            border-width: 1px;
            background-color: whitesmoke;
            display: flex;
            line-height: 50px;
            justify-content: space-between;
            margin-top: 20px;
        }
        #pages #left {
            display: flex;
        }
        #left{
            padding-left: 300px;
        }

        #left div {
            text-align: center;
            border-right: 1px solid #000;
            padding-left: 5px;
            padding-right: 5px;
        }

        #left div a {
            text-decoration: none;
            display: block;
            height: 100%;
            width: 100%;
            color: #000;
        }

        #left div a:hover {
            cursor: pointer;
            background-color: gray;
        }

        #left div:first-child {
            width: 180px;
        }
        #left div:not(first-child) {
            width: 100px;
        }
        #right {
            margin-right: 20px;
        }
        #right span{
            display: inline-block;
            width: 32px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            background-color: #ccc;
        }
        #right span:hover {
            cursor: pointer;
        }
        #table caption{
            caption-side: top;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
    <ul class="navbar-nav">
        <li>
            <h1><a th:href="@{/web/toindex(admin='admin')}" style="color: white; text-decoration: none">恋文图书管理系统</a></h1>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/book/showbook}">图书管理</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/user/showuser}">读者管理</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/book/showborrow1}">借还管理</a>
        </li>
    </ul>


    <div class="text-white" style="font-size: medium; position: absolute; bottom: 30px; right: 40px">
        <div class="dropdown">
            <a class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
               th:text="${session.user.username}+', 您好'">
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" th:href="@{/user/logout}">注销</a>
            </div>
        </div>
    </div>
</nav>

<table id="table" class="table table-hover table-striped table-bordered " style="margin-top: 10px">
    <caption style="text-align: center">
        <form th:action="@{/user/searchuser}" method="get">
            <input name="search" id="search" style="height: 37px;padding-bottom: 5px; border-radius: 5px">
            <button class="btn btn-outline-primary">搜&nbsp;&nbsp;&nbsp;索</button>
        </form>
    </caption>

    <tr>
        <th>用户名</th>
        <th>用户权限</th>
        <th>操作</th>
    </tr>

    <tbody>
    <tr  th:each="user:${pageBean.users}">
        <td th:text="${user.username}"></td>
        <td th:if="${user.admin} eq '0'">用户</td>
        <td th:if="${user.admin} eq '1'">管理员</td>


        <td>
            <a class="btn btn-primary btn-sm" th:href="@{/user/delUser(username=${user.username})}">删除</a>
            <a class="btn btn-primary btn-sm" th:href="@{/user/useredit(username=${user.username})}">编辑</a>
        </td>
    </tr>
    </tbody>


</table>

<div id="pages" style="width: 100%" class="table table-hover table-striped table-bordered">
    <div id="left">
        <div>
            <a th:text="'共有'+${pageBean.totalSize}+'条数据'+'  '+${pageBean.currentPage}+'/'+${pageBean.totalPage}+'页'"></a>
        </div>
        <div>
            <a th:href="@{/user/showuser(page=1)}">首页</a>
        </div>
        <div>

            <a th:if="${pageBean.currentPage} le '1'" th:href="@{/user/showuser(page=1)}">上一页</a>

            <a th:if="${pageBean.currentPage} gt '1'" th:href="@{/user/showuser(page=${pageBean.currentPage}-1)}">上一页</a>
        </div>
        <div>

            <a th:if="${pageBean.currentPage} ge ${pageBean.totalPage}" th:href="@{/user/showuser(page=${pageBean.totalPage})}">下一页</a>
            <a th:if="${pageBean.currentPage} lt ${pageBean.totalPage}" th:href="@{/user/showuser(page=${pageBean.currentPage}+1)}">下一页</a>

        </div>
        <div>
            <a th:href="@{/user/showuser(page=${pageBean.totalPage})}">尾页</a>
        </div>
    </div>

</div>



</body>
<script src="/js/ajax.aspnetcdn.com_ajax_jquery_jquery-1.9.0.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</html>